<template>
	<view class="redact">
		<view class="tops">
			<view class="vis">
				<view>车牌号</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.cph" placeholder="请输入车牌号"></uni-easyinput>
				</view>
			</view>
			<view class="vis">
				<view>车主姓名</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.name" placeholder="请输入车主名"></uni-easyinput>
				</view>
			</view>
			<view class="vis">
				<view>联系方式</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.dh" placeholder="请输入联系方式"></uni-easyinput>
				</view>
			</view>
		</view>
		
		<view class="tops clx">
			<view class="vis">
				<view>车身型号</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.lx" placeholder="请输入车的类型"></uni-easyinput>
					<image style="width: 8px;height: 10px;margin-left: 5px;" mode="widthFix" src="http://cdn.jxsr.com/right.png" />
				</view>
			</view>
			<view class="vis">
				<view>车厢大小</view>
				<view class="ckg">
					<view class="lis">
						长
						<view>
							<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.c" placeholder="请输入联系方式"></uni-easyinput>
						</view>
					</view>
					<view class="lis">
						宽
						<view>
							<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.k" placeholder="请输入联系方式"></uni-easyinput>
						</view>
					</view>
					<view class="lis">
						高
						<view>
							<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.g" placeholder="请输入联系方式"></uni-easyinput>
						</view>
					</view>
					<view class="m">米</view>
				</view>
			</view>
			<view class="vis">
				<view>车身颜色</view>
				<view>
					<uni-easyinput :inputBorder="false" :clearable="false" v-model="clxx.cys" placeholder="请输入车的颜色"></uni-easyinput>
				</view>
			</view>
		</view>
		<view class="dptp">
			<view class="titles">
				车辆图片
			</view>
			<view class="sctp">
				<uni-file-picker
					limit="1"
					v-model="clxx.imageValue"
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:image-styles="imageStyles"
					
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
				></uni-file-picker>
			</view>
		</view>
		<!-- 保存 -->
		<view class="buts">
			<view class="service" @click="refund()">
				<span class="sp2">保存</span>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				clxx:{
					cph:'赣E·GJ577',
					name:'李某某',
					dh:'12797689865',
					lx:'中货车',
					c:'3.3',
					k:'1.9',
					g:'1.9',
					cys:'白色',
					imageValue:[
						{
							"name":"蔬菜",
							"extname":"png",
							"url":"http://cdn.jxsr.com/sh.png",
						},
					],
				},
				imageStyles:{
								width:110,
								height:110,
								border:{
									radius:'10px'
								},
							},
			}
		},
		computed:{
			
		},
		methods: {
			// 获取上传状态
			select(e){
				console.log('选择文件：',e)
				console.log(this.clxx.imageValue);
			},
			// 获取上传进度
			progress(e){
				console.log('上传进度：',e)
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
				
			},
			
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			}
		}
	}
</script>

<style scoped lang="scss">
	// uni-page-body{
	// 	height: 100%;
		.redact{
			padding: 10px;
			.tops{
				padding: 0 10px;
				margin-bottom: 10px;
				background: #FFFFFF;
				border-radius: 10px;
				.vis{
					height: 50px;
					border-bottom: 1px solid #F5F5F5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 18px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 22px;
					view:nth-child(2){
						width: 50%;
						::v-deep .uni-easyinput{
							.uni-easyinput__content{
								.uni-easyinput__content-input{
									.uni-easyinput__placeholder-class{
										font-size: 18px;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: #999999;
										line-height: 22px;
										text-align: right;
									}
									.uni-input-input{
										font-size: 18px;
										font-family: PingFangSC-Regular, PingFang SC;
										font-weight: 400;
										color: $mainText;
										line-height: 22px;
										text-align: right;
									}
								}
							}
						}
					}
				}
				.vis:last-child{
					border-bottom: none;
				}
				
			}
			.clx{
				.vis{
					view:nth-child(2){
						width: 70%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						font-size: 18px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $mainText;
						line-height: 22px;
					}
				}
				.vis:nth-child(2){
					.ckg{
						.lis{
							width: 30%;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							font-size: 18px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 600;
							color: $mainText;
							line-height: 22px;
						}
						.m{
							font-weight: 400;
						}
					}
				}
			}
			.dptp{
				background: #FFFFFF;
				border-radius: 10px;
				padding: 0 10px;
				margin-bottom: 10px;
				.titles{
					font-size: 18px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: $mainText;
					line-height: 60px;
				}
				.sctp{
					padding-bottom: 20px;
				}
			}
			.buts{
				width: 100%;
				height: 56px;
				position: fixed;
				bottom: 4%;
				left: 10px;
				.service{
					width: 95%;
					height: 56px;
					background: linear-gradient(232deg, #B9D378 0%, #1B9A5D 100%);
					box-shadow: 0px 0px 10px 0px rgba(33, 156, 94, 0.5);
					border-radius: 28px;
					display: flex;
					justify-content: center;
					align-items: center;
					.sp2{
						font-size: 18px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 56px;
						padding: 0 5px;
					}
				}
			}
		}
	// }
</style>
